<!-- 交易明细统计打印 -->
<template>
    <customDialog title="缴退费收据联" size="small" @dialogClose="dialogClose">
        <div id="printTdsReport" ref="printTdsReport">
            <div class="receipt-container">
                <div class="receipt-header">
                    <h2 class="receipt-title">{{ getTitle() }}收据联</h2>
                    <span class="receipt-no">{{ data.pay_code }}</span>
                    <span class="receipt-time">{{ getCurTime() }}</span>
                </div>

                <div class="receipt-body">
                    <div class="info-row">
                        <div>
                            <span class="label">账户ID：</span>
                            <span class="value">{{ data.ac_id }}</span>
                        </div>
                        <div>
                            <span class="label">账户名称：</span>
                            <span class="value">{{ data.ac_name }}</span>
                        </div>
                    </div>

                    <div class="info-row">
                        <div>
                            <span class="label">联系人：</span>
                            <span class="value">{{ data.user_name }}</span>
                        </div>
                        <div>
                            <span class="label">联系电话：</span>
                            <span class="value">{{ data.user_tel }}</span>
                        </div>
                    </div>

                    <div class="info-row">
                        <div>
                            <span class="label"> {{ getTitle() }}金额(小写)：</span>
                            <span class="value">
                                <label class="bold">{{ data.pay_sum }}</label>
                                元</span
                            >
                        </div>
                        <div>
                            <span class="label">当前余额：</span>
                            <span class="value">
                                <label class="bold">{{ data.ac_sum }}</label> 元</span
                            >
                        </div>
                    </div>

                    <div class="info-row">
                        <div class="full">
                            <span class="label"> {{ getTitle() }}金额(大写)：</span> <span class="value">{{ getDx(data.pay_sum) }}</span>
                        </div>
                    </div>

                    <div class="info-row">
                        <div>
                            <span class="label">操作员：</span>
                            <span class="value">{{ data.opr_name }}</span>
                        </div>
                        <div>
                            <span class="label">操作时间：</span>
                            <span class="value">{{ getTime(data.pay_time) }}</span>
                        </div>
                    </div>

                    <div class="info-row">
                        <div class="full">
                            <span class="label normal">技术支持：</span>
                            <span class="value normal">湖南卓强物联科技有限公司</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="receipt-footer">
            <button class="print-btn" @click="print">打印</button>
        </div>
    </customDialog>
</template>

<script>
import {AjaxCommon} from '@/libs/apiCommon'
import {moneyToChinese, printAsPDF} from '@/libs/tools'
import customDialog from '@/components/customComponents/customDialog'
import moment from 'moment'
import {Utility} from '../../../../libs/utility'
export default {
    name: 'tDsReportTable',
    components: {customDialog},
    props: ['orderId', 'time'],
    data() {
        return {
            oId: '',
            data: {
                /** 缴费金额 */
                pay_sum: '',
                /** 操作时间 */
                pay_time: '',
                /** 账户余额 */
                ac_sum: '',
                /** 交易流水号 */
                pay_code: '',
                /** 账户人ID */
                ac_id: '',
                /** 账户名称 */
                ac_name: '',
                /** 用户姓名 */
                user_name: '',
                /** 用户电话 */
                user_tel: '',
                /** 操作员 */
                opr_name: ''
            }
        }
    },
    computed: {},
    created() {
        this.getData()
    },
    methods: {
        getCurTime() {
            return Utility.getCurrentTime()
        },
        getTitle() {
            if (this.data.pay_sum && this.data.pay_sum < 0) {
                return '退费'
            } else {
                return '缴费'
            }
        },
        getDx(value) {
            if (value) {
                return moneyToChinese(value)
            } else {
                return ''
            }
        },
        getTime(value) {
            if (value) {
                return moment(value).format('YYYY-MM-DD HH:mm:ss')
            }
            return ''
        },
        dialogClose() {
            this.$emit('close', '')
        },
        async getData() {
            //  pay_sum缴费金额
            //  pay_time 操作时间、
            // ac_sum 账户余额、
            // pay_code 交易流水号、
            // ac_id　账户人ID、
            // ac_name账户名称、
            //  user_name 用户姓名
            // 、user_tel 用户电话、
            // opr_name操作员
            // 打印收据的接口
            // api/Payment/GetPayInfo?pay_guid={pay_guid}&pay_time={pay_time}
            const res = await AjaxCommon(`/api/Payment/GetPayInfo?pay_guid=${this.orderId}&pay_time=${this.time}`, 'get', null)
            this.data = res.data.Message?.[0]
        },
        print() {
            printAsPDF('printTdsReport', this.getTitle() + '收据')
        }
    }
}
</script>

<style lang="scss" scoped>
#printTdsReport {
    display: flex;
    width: 100%;

    .receipt-container {
        width: 100%;
        margin: 0px auto;
        padding: 0 20px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        font-family: '微软雅黑', sans-serif;
    }

    .receipt-header {
        text-align: center;
        justify-content: center;
        align-items: center;
        border-bottom: 2px solid #f0f0f0;
        height: 60px;
        line-height: 60px;
        width: 100%;
        position: relative;
    }

    .receipt-title {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin: 0;
    }

    .receipt-no {
        font-size: 14px;
        color: #666;
        font-weight: bold;
        text-align: right;
        position: absolute;
        top: -10px;
        right: 0;
    }
    .receipt-time {
        font-size: 14px;
        color: #666;
        font-weight: bold;
        text-align: right;
        position: absolute;
        top: 11px;
        right: 0px;
    }

    .receipt-body {
        // line-height: 2;
        // margin-top: 20px;
        margin-bottom: 20px;
    }

    .info-row {
        font-size: 16px;
        display: flex;
        div {
            width: 50%;
            display: flex;
        }
        .full {
            width: 100% !important;
        }
    }

    .label {
        color: #000;
        width: 140px;
        text-align: left;
        border-left: 1px solid #f0f0f0;
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        padding: 5px 2px;
        text-indent: 10px;
    }
    .bold {
        font-weight: bold !important;
    }
    .normal {
        font-weight: normal !important;
        font-size: 14px !important;
    }
    .value {
        padding: 5px;
        color: #000;
        flex: 1;
        text-align: left;
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
    }
}
.receipt-footer {
    margin-top: 20px;
    text-align: right;
    .print-btn {
        padding: 8px 16px;
        background-color: #409eff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }

    .print-btn:hover {
        background-color: #3a8ee6;
    }
}
</style>